import React, { Component, createRef } from 'react'

export default class FormTest extends Component {
    /**
     * 受控组件：表单的值，受到状态数据的控制，就是受控组件
     * 非受控组件：表单的值，不受到状态数据的控制，就是非受控组件
     *  1. 自身状态数据如何渲染到表单中
     *  2. 如何获取用户最新输入的数据
     */
    submitHandler(e){
        e.preventDefault()
        console.log('1111')

        console.log('username: ',this.usernameRef.current.value)
        console.log('password: ', this.passwordRef.current.value)
    }
    state = {
        username:'zyx',
        password:'123123',
        sex:'0',
        city:'3',
        hobby: ['1','3','2','4']
    }
    // 用户名ref
    usernameRef = createRef()
    passwordRef = createRef()
    render() {
        let {username, password, sex, city, hobby} = this.state
        return (
            <>
                <form action="http://baidu.com" onSubmit={this.submitHandler.bind(this)}>

                    <p>用户名：<input type="text" ref={this.usernameRef} name="" id="" defaultValue={username}/></p>
                    <p>密码: <input type="password" ref={this.passwordRef} name="" id="" defaultValue={password}/></p>
                    <p>性别： 
                        <input type="radio" name="sex" value="1" defaultChecked={sex==='1'}/> 男
                        <input type="radio" name="sex" value="0" defaultChecked={sex==='0'}/> 女
                    </p>
                    <p>
                        城市：
                        <select name="city" id="" defaultValue={city}>
                            <option value="1">北京</option>
                            <option value="2">上海</option>
                            <option value="3">深圳</option>
                        </select>
                    </p>
                    <p>
                        爱好：
                        <input type="checkbox" name="hobby" value="1" defaultChecked={hobby.includes('1')}/> 打台球
                        <input type="checkbox" name="hobby" value="2" defaultChecked={hobby.includes('2')}/> 弹玻璃球
                        <input type="checkbox" name="hobby" value="3" defaultChecked={hobby.includes('3')}/> 滑雪
                        <input type="checkbox" name="hobby" value="4" defaultChecked={hobby.includes('4')}/> 打出溜滑
                    </p>

                    {/* 以下按钮可以提交 */}
                    <button>保存</button>
                    {/* <button type='submit'>保存</button>
                    <input type="submit" value="保存" /> */}
                    {/* 以下不能提交 */}
                    {/* <button type="button">保存</button> */}
                </form>
            </>
        )
    }
}
